<template>
  <section class="layout">
  <HeaderItem @handleClick="handleClick"/>
  <section class="flex fx1 ">
    <el-menu
        :default-active="currentMenu"
        class="el-menu-vertical-demo"
        @select="handleOpen"
      >
        <el-menu-item v-for="(item, index) in nav" :index="item.name"  :key="index" >
          <el-icon><icon-menu /></el-icon>
          <span>{{item.name}}</span>
        </el-menu-item>
       
        
      </el-menu>
   <section style="width: 100%;overflow: hidden">
    <NuxtPage />
   </section>
  </section>
  <FooterItem />
</section>

</template>

<script lang='ts' setup>

let navs = [
  {
    name: '控制台',
    path: '/',
  },

  {
    name: '新闻管理',
    path: '/news',
    role: ['user'],
  },

  {
    name: '留言管理',
    path: '/contact',
    role: ['user'],
  },
  {
    name: '预约管理',
    path: '/rev',
    role: ['dihaiba'],
  },
]
const nav:any  = []
const handleClick = (v:string) => {
  console.log(v)
}

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const currentMenu = ref<any>(navs[0].name)
if (typeof window !== 'undefined') {
  const authUser = localStorage.getItem('authUser')
  const role = (JSON.parse(authUser || '{}')).roles[0]
  console.log(navs)
  console.log(role)
 
  nav.push(navs[0])
  navs.forEach((item, index) => {
    if(item.role?.includes(role)) {
     nav.push(item)
    }
  })
  console.log(nav)
  if( router.currentRoute.value.path === '/') {
  currentMenu.value = '控制台'
} else {
  const rou = navs.find(item => 
    {
      if(item.path !== '/') {
        const res  = router.currentRoute.value.path.slice(1).includes(item.path.slice(1))
        return res
      }
    }
  );
  currentMenu.value = (rou?.name)
}
}


const handleOpen = (key: string, keyPath: string[]) => {
  if(currentMenu.value === key) return;
  currentMenu.value = key;
  const result = navs.find(item => item.name === key);
  if (result) {
    navigateTo(result.path);
  }
}

</script>

<style scoped lang="stylus">
.layout 
  display flex
  flex-direction column
  min-height 100vh

.el-menu-vertical-demo {
  min-height: 100%;
}
</style>